import React, { useState } from 'react';
import { Menu, Icon } from 'antd';
import { Link } from 'react-router-dom';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import { render } from '@testing-library/react';


//渲染菜单内容
const renderMenuItem = (item) => (     //item.route 菜单单独跳转的路由
    <Menu.Item key={item.key}>
         <Link to={(item.route || item.key) + (item.query || '')}>
            {item.icon && <Icon type={item.icon} />}
            <span className="nav-text">{item.title}</span>
        </Link>
    </Menu.Item>
)
//渲染子菜单组件
const renderChildMenu = (item)=>(
    <Menu.Item key={item.title}>
           <span className="nav-text">{item.title}</span>
    </Menu.Item>
)
//渲染菜单结构
//item.subs.map(item => renderMenuItem(item))    渲染route中 subs属性
const renderSubMenu = (item) => (
    <Menu.SubMenu
        key={item.key}
        title={
            <span>
                {item.icon && <Icon type={item.icon} />}
                <span className="nav-text">{item.title}</span>
            </span>
        }  
    >
          {item.data.map(item => {
                console.log(item)
                return renderMenuItem(item)
          })}    
    </Menu.SubMenu>
)

export default ({menus,childMenus,...props})=>{
    const [dragItems,setDragItems] = useState(menus)   //route 中的信息
    console.log(dragItems)
    return(
        dragItems.map((item,index)=>(
            <Menu {...props}>
                {item.data?renderSubMenu(item):renderMenuItem(item)}
            </Menu>
        ))
        // <Menu {...props}>
        //     {dragItems.map((item,index)=>(
        //       //  renderMenuItem(item)
        //         item.data?renderSubMenu(item):renderMenuItem(item)
        //         // renderMenuItem(item)
        //         // : renderSubMenu(item)
        //     ))}
        // </Menu>
    )
}